import Base from '@/components/Base';
import IndexLoading from '@/components/home/loading';
import IndexMenu from '@/components/home/menu';
import Blurs from '@/components/Svg/Blurs';
import { indexWebgl } from '@/modules/indexControl';
import { Router } from '@/modules/navigator';
import { Layout } from 'antd';
import { Outlet } from 'umi';
import styles from './index.less';

// const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

interface MENU_ITEM {
  title: string;
  route?: Router;
  children?: MENU_ITEM[];
}
interface State {
  loading: boolean;
}

export default class Index extends Base<any, State> {
  public state: State = {
    loading: true,
  };
  private currentPath: string = '';

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)

    indexWebgl.init('index-canvas-container');
    indexWebgl.onSubscribe('afterLoad', (status) => {
      this.setState({
        loading: false,
      });
    });
  }

  public willUnmount() {
    indexWebgl.destroy();
  }

  public componentDidUpdate(prevProps: any) {
    if (this.currentPath !== window.location.pathname) {
      // console.log('prevProps::', this.currentPath, window.location)
      this.currentPath = window.location.pathname;
    }
  }

  public render() {
    const { loading } = this.state;

    // if (props.location.pathname === '/login') {
    //   return <SimpleLayout>{ props.children }</SimpleLayout>
    // }

    return (
      <div>
        <IndexMenu />
        <div
          id="index-canvas-container-bg"
          className={this.cx(styles.indexCanvas, styles.bg)}
        />
        <div id="index-canvas-container" className={styles.indexCanvas} />
        <IndexLoading
          loading={loading}
          onHide={() => {
            indexWebgl.startAnimate();
          }}
        />
        <Blurs />
        <Outlet />
      </div>
    );
  }
}
